<template>
    <div class="box">
        <van-nav-bar title="小u商城" left-arrow />
        <div class="tos">
            <div class="img1">
                <img src="../assets/Snipaste_2023-01-10_21-05-10.png" alt="">
            </div>
            <div class="img2">
                <img src="../assets/white.png" alt="">
            </div>
            <div class="ipt">
                <van-icon name="search" class="zi" />
                <input type="text" placeholder="按内容搜索">
            </div>
            <div class="img3">
                <img src="../assets/wu.png" alt="">
            </div>
        </div>
        <!-- 头部top栏切换部分 -->
        <van-tabs v-model="activeName" background="#ff7e6e" color="#fff">
            <van-tab title="推荐" name="a">
                <!-- 轮番图 -->
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item>
                        <img src="../assets/lun1.png" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="../assets/lun2.png" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="../assets/电脑壁纸4.jpg" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="../assets/电脑壁纸9.jpg" alt="">
                    </van-swipe-item>
                </van-swipe>
                <ul class="xian">
                    <li>
                        <img src="../assets/xian.png">
                        <p>限时秒杀</p>
                    </li>
                    <li>
                        <img src="../assets/chang.png">
                        <p>畅销商品</p>
                    </li>
                    <li>
                        <img src="../assets/pin.png">
                        <p>品质大牌</p>
                    </li>
                    <li>
                        <img src="../assets/xiao.png">
                        <p>小u自营</p>
                    </li>
                    <li>
                        <img src="../assets/ji.png">
                        <p>积分商城</p>
                    </li>
                </ul>
                <!-- 限时秒杀 -->
                <div class="mited">
                    <div class="lefts">
                        <!-- <img src="../assets/big.png" alt=""> -->
                        <div class="lef">
                            <span>限时秒杀</span><span>查看更多></span>
                        </div>

                        <div class="hao1">
                            每天O点场,好货秒不停
                        </div>
                        <!-- 时间倒计时 -->
                        <van-count-down :time="time" class="tims">
                            <template>
                                <span class="block">05</span>
                                <span class="colon">:</span>
                                <span class="block">20</span>
                                <span class="colon">:</span>
                                <span class="block">48</span>
                            </template>
                        </van-count-down>
                    </div>
                    <div class="rights">
                        <div class="tops">
                            <!-- <img src="../assets/small.png" alt=""> -->
                            <div class="wens">
                                <h4>品牌上新</h4>
                                <div>
                                    <span>9点整抢大牌</span>
                                </div>
                                <button>
                                    疯抢红包 >
                                </button>
                            </div>
                        </div>
                        <div class="bottoms">
                            <div class="zis">
                                <h4>日用好物</h4>
                                <div>
                                    <span>愿君多采搬</span>
                                </div>
                                <button>
                                    塞满奖券 >
                                </button>
                            </div>
                            <!-- <img src="../assets/02.png" alt=""> -->
                        </div>
                    </div>
                </div>

                <!-- 双十一预购 -->
                <div class="tenone">
                    <!-- 双十一 -->
                    <div class="tu1">
                        <div @click="sh(0)">
                            <h5 :class="this.heid == 0 ? 'active1' : 'tu1'">双11尖货购物</h5>
                        </div>
                        <div class="ims1">
                            <div>
                                <img src="../assets/01.png" alt="">
                            </div>
                            <div>
                                <img src="../assets/02s.png" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- 唱购全球 -->
                    <div class="tu2">
                        <div @click="sh(1)">
                            <h5 :class="this.heid == 1 ? 'active1' : 'tu1'">畅购全球</h5>
                        </div>
                        <div class="ims2">
                            <div>
                                <img src="../assets/03.png" alt="">
                            </div>
                            <div>
                                <img src="../assets/04.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="女装" name="b">内容 2</van-tab>
            <van-tab title="鞋包" name="c">内容 3</van-tab>
            <van-tab title="居家" name="d">内容 1</van-tab>
            <van-tab title="母婴" name="e">内容 2</van-tab>
            <van-tab title="美妆" name="f">内容 3</van-tab>
            <div><img src="" alt=""></div>
            <van-tab title="分类" name="g">内容 1</van-tab>
        </van-tabs>

    </div>
</template>
<script>

export default {
    data() {
        return {
            // 底部栏
            botid: 1,
            // 头部top栏
            activeName: 'a',
            time: 5,
            // 货物id
            heid: 0
        }
    },
    methods: {
        sh(a) {
            this.heid = a
        }
    },
}
</script>
<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

::v-deep .block {
    background-color: #aec383 !important;
}

::v-deep .tims {
    margin-left: -65px;
    margin-top: 10px;
    color: #fff;
    font-weight: 900;

    .colon {
        color: #aec383 !important;
    }

}

.box {

    .tenone {
        width: 98%;
        margin: 10px auto;
        height: 160px;
        display: flex;

        .tu1 {
            width: 50%;
            height: 100%;


            .active1 {
                color: orangered !important;
            }


            h5 {
                color: #ccc;
                margin-top: 10px;
                margin-bottom: 10px;
            }


            .ims1 {
                display: flex;

                div {
                    width: 48%;
                    height: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                div:nth-child(2) {
                    margin-left: 2%;
                }
            }
        }

        .tu2 {
            width: 50%;
            height: 100%;

            h5 {
                color: #ccc;
                margin-top: 10px;
                margin-bottom: 10px;
                // text-align: center;
                // margin-left: 40px;

            }

            .active1 {
                color: orangered !important;
            }
            .ims2 {
                display: flex;

                div {
                    width: 48%;
                    height: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                div:nth-child(2) {
                    margin-left: 2%;
                }
            }
        }
    }

    // 时间倒计时
    .colon {
        display: inline-block;
        margin: 0 4px;
        color: #ee0a24;
    }

    .block {
        display: inline-block;
        width: 22px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #ee0a24;
    }

    .mited {
        width: 98%;
        height: 170px;
        margin: 15px auto;
        display: flex;

        .lefts {
            width: 49%;
            height: 100%;
            background-image: url('../assets/big.png');

            .hao1 {
                color: #aec383;
                font-size: 10px;
                // float: left;
                margin-left: -40px;
            }

            .lef {
                display: flex;
                justify-content: space-between;

                span:nth-child(1) {
                    color: #aec383;
                    font-weight: 900;
                    padding: 10px 10px;
                }

                span:nth-child(2) {
                    font-size: 6px;
                    line-height: 43px;
                    padding-right: 15px;
                }
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .rights {
            width: 49%;
            height: 100%;
            margin-left: 2%;

            .tops {
                width: 100%;
                height: 47%;
                margin-bottom: 2%;
                background-image: url('../assets/small.png');

                .wens {
                    margin-left: -80px;
                }

                h4 {
                    color: #ee0a24;
                    padding-top: 10px;
                }

                span {
                    color: #ff6040;
                    font-size: 10px;
                }

                button {
                    width: 70px;
                    height: 20px;
                    font-size: 10px;
                    color: #fff;
                    background-color: #ff6040;
                    border-top-right-radius: 25px;
                    border-bottom-right-radius: 25px;
                    border: 0;
                }
            }

            .bottoms {
                width: 100%;
                height: 49%;
                margin-top: 2%;
                background-image: url('../assets/02.png');

                .zis {
                    margin-left: -80px;
                }

                h4 {
                    color: #b959ff;
                    padding-top: 10px;
                }

                span {
                    color: #a75fda;
                    font-size: 10px;
                }

                button {
                    width: 70px;
                    height: 20px;
                    font-size: 10px;
                    color: #fff;
                    background-color: #b959ff;
                    border-top-right-radius: 25px;
                    border-bottom-right-radius: 25px;
                    border: 0;
                }
            }
        }
    }

    .xian {
        width: 100%;
        height: 50px;
        // background-color: #ff6040;
        display: flex;

        li {
            width: 25%;
            flex-wrap: wrap;

            p {
                font-size: 10px;
            }
        }
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        // line-height: 150px;
        text-align: center;
        // background-color: #39a9ed;
        width: 450px;
        margin: 10px auto;

        img {
            width: 90%;
            height: 100%;
        }
    }

    .botnav {
        display: flex;
        position: fixed;
        bottom: 0;
        height: 50px;
        border-top: 1px solid #ccc;
        width: 100%;

        li {
            width: 25%;
            line-height: 50px;
            align-content: flex-start;
        }
    }

    .ipt {
        display: flex;
        position: relative;

        input {
            padding-left: 25px;
            border: 0;
            height: 90%;
        }

        .zi {
            position: absolute;
            left: 5px;
            top: 10px;
            font-size: 20px;
        }
    }

    .tos {
        .img1 {
            width: 40px;
            height: 40px;

            img {
                width: 80%;
                height: 80%;
            }
        }

        .img2 {
            width: 30%;

            img {
                width: 80%;
                height: 80%;
            }
        }

        .img3 {
            margin: 10px auto;
        }

        display: flex;
        background-color: #ff6040;
    }

    .van-nav-bar {
        background-color: #ff6040;
    }
}
</style>